<template>
<div>
  <Modal
    width="888"
    v-model="detailModal"
    title="查看详情">
    <div>
      <div class="divtitleClass">筛选条件</div>
      <div v-for="(item,index) in detailList" :key="index">
        <div v-if="item.type === '0'">
          <Row style="padding-top: 10px;padding-bottom: 10px">
            <Col span="3" style="padding-left: 10px">
              <Tag color="primary">{{item.columns_detail}}</Tag>
            </Col>
            <Col span="4">
              <Select disabled v-model="item.support_pick" style="width:100px;margin-right: 10px;margin-left: 10px;text-align: center">
                <Option v-for="(item1,index1) in JSON.parse(item.support)" :key="index1" :value="item1.value">{{item1.label}}</Option>
              </Select>
            </Col>
            <Col span="8">
              <span v-if="item.columns_type === 'input'">
                <Input disabled v-model="item.columns_value" :type="item.value_type === 'String' ? 'text':'number'" placeholder="请输入内容" style="width: 300px" />
              </span>
              <span v-if="item.columns_type === 'select' && item.dict_type === '0'">
                <Select disabled v-model="item.columns_value" style="width:300px">
                  <Option v-for="(item1,index1) in JSON.parse(item.dict_info)" :key="index1" :value="item1.value">{{item1.label}}</Option>
                </Select>
              </span>
              <span v-if="item.columns_type === 'cascader' && item.dict_type === '0'" style="flex: auto">
                  <Cascader disabled :data="JSON.parse(item.dict_info)" v-model="item.dispose_columns_value" style="width:300px"></Cascader>
              </span>
            </Col>
          </Row>
        </div>
      </div>
      <div class="divtitleClass">查询单位</div>
      <CheckboxGroup v-model="company_level">
        <Checkbox label="area_id" border disabled>区</Checkbox>
        <Checkbox label="street_id" border disabled>街道</Checkbox>
        <Checkbox label="community_id" border disabled>社区</Checkbox>
        <Checkbox label="garden_id" border disabled>网格</Checkbox>
      </CheckboxGroup>
    </div>
  </Modal>
</div>
</template>

<script>
import { findTemplateDetailList } from '../../../api/grid-statistics'

export default {
  name: 'template-detail',
  data () {
    return {
      detailModal: false,
      detailList: [],
      company_level: []
    }
  },
  methods: {
    init (e) {
      let data = {
        template_code: e.code
      }
      findTemplateDetailList(data).then(ret => {
        if (ret.data.errcode === 0) {
          // this.$Notice.success({ title: '查询成功！', desc: ret.data.errmsg })
          let result = ret.data.data
          this.company_level = []
          result.forEach(item => {
            if (item.columns_type === 'cascader') {
              console.log(item.columns_value)
              let x = item.columns_value.split('-')
              console.log(x)
              let y = [x[0], item.columns_value]
              item.dispose_columns_value = y
            }
            if (item.type === '1') {
              this.company_level.push(item.columns_name)
            }
          })
          this.detailList = result
          this.detailModal = true
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    }
  }
}
</script>

<style scoped>
.divtitleClass{
  background-color: rgb(236, 248, 255);
  border-left: 5px solid rgb(80, 191, 255);
  border-radius: 4px;
  font-size: 16px;
  margin: 15px 0px;
  padding: 8px 12px;
  width: 100%;
}
</style>
